<template>
  <div>
    <!-- 1. 模块A的state数据 -->
    <p>{{$store.state.moduleA.username}}</p>
    <!-- 1. 模块A的getters数据 -->
    <p>{{$store.getters.newName}}</p>
    <hr />
    <!-- 模块B的state数据 -->
    <p>{{$store.state.moduleB.username}}</p>
    <p>{{$store.getters['moduleB/newName']}}</p>
    <button @click="update">mutaionsFn</button>
    <button @click="update2">Actionssssasd22ad</button>
  </div>
</template>

<script>
import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()

    const update = () => {
      store.commit('moduleB/updateName')
    }

    const update2 = () => {
      store.dispatch('moduleB/updateName')
    }

    return {
      update,
      update2
    }
  }
}
</script>

<style>

</style>
